import React, { Key, memo, useCallback, useState } from "react";
import Buttons from "../../components/button";
import { ButtonChangePorps, ButtonItem } from "../../type/button";
import Radios from "../../components/Radio";
import { RadioChangeValue } from "../../type/radio";
import { Button, Input, Space, Table, Modal, message } from "antd";
import styles from "./index.module.css";
import _ from "lodash";
import { useFetchTableList } from "../../hooks/use-fetch-table-list";
import { getRegTable, passApplication } from "../../api/register";
import { ColumnsType } from "antd/es/table";
import { BaseTableColumns } from "../../type/active";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { delTableData } from "../../api/active";
import { useDeleteTable } from "../../hooks/use-delete-table";

const radioList = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "审核中",
    value: "0",
  },
  {
    label: "已通过",
    value: "1",
  },
  {
    label: "未通过",
    value: "2",
  },
];

const Index = () => {
  const [modal, contextHolder] = Modal.useModal();
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
  const { dataSource, total, filterParams, setFilterParams } =
    useFetchTableList({
      API: getRegTable,
    });
  const { setDeleteProps, deleteTable } = useDeleteTable({
    API: delTableData,
    title: "就是要删除你呢",
    success: () => {
      setSelectedRowKeys([]);
      // 根据业务逻辑 删除成功以后要重置分页参数为1
      setFilterParams({ ...filterParams, page: 1 });
    },
  });

  const buttonList: ButtonItem[] = [
    {
      type: "default",
      label: "刷新",
      disabled: false,
      danger: false,
    },
    {
      type: "primary",
      danger: true,
      disabled: selectedRowKeys.length === 0,
      label: "删除",
    },
  ];
  const columns: ColumnsType<BaseTableColumns> = [
    {
      title: "id",
      dataIndex: "id",
      key: "id",
      width: 50,
    },

    {
      title: "昵称",
      dataIndex: "name",
      width: 120,
      key: "id",
    },
    {
      title: "手机号",
      dataIndex: "telPhone",
      width: 100,
      key: "id",
    },
    {
      title: "密码",
      dataIndex: "passworld",
      width: 100,
      key: "id",
    },
    {
      title: "审核状态",
      dataIndex: "status",
      width: 200,
      key: "id",
      render: (text) => renderActiveStatus(text),
    },
    {
      title: "审核",

      key: "id",
      width: 150,
      render: (text, item) => {
        const { status } = item;
        return (
          <Space>
            <Button
              type="primary"
              disabled={!status}
              onClick={() => confirm(item, "pass")}
            >
              通过
            </Button>
            <Button
              danger
              disabled={!status}
              onClick={() => confirm(item, "refuse")}
            >
              拒绝
            </Button>
          </Space>
        );
      },
    },
    {
      title: "操作",
      key: "id",
      render: (text, item) => {
        return (
          <Space>
            <Button danger onClick={() => setDeleteProps([item.id.toString()])}>
              删除
            </Button>
          </Space>
        );
      },
    },
  ];
  const onButtonChange = (keys: ButtonChangePorps) => {
    const { value } = keys;
    if (value === "刷新") {
      setFilterParams({ page: 1, pageSize: 10 });
    }else if(value === "删除"){
      const changeDeleteProps = selectedRowKeys.map((ite: any) =>
      ite.toString()
    );
    setDeleteProps(changeDeleteProps);
    }
  };
  const radioChange = (value: RadioChangeValue) => {
    setFilterParams({
      ...filterParams,
      registerStatus: value,
      page: 1,
    } as any);
  };
  const inputSearch = useCallback(
    _.debounce((e: any) => {
      setFilterParams({
        ...filterParams,
        registerValue: e.target.value,
        page: 1,
      } as any);
    }, 300),
    []
  );
  const renderActiveStatus = (text: string) => {
    if (text) {
      return "审核中";
    } else {
      return "已通过";
    }
  };
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const confirm = (item: any, isAdop: string) => {
    const { id, name } = item;
    const contentText = isAdop === "pass" ? "通过" : "拒绝";
    modal.confirm({
      icon: <ExclamationCircleOutlined />,
      content: `确认要${contentText} ${name}的申请吗？此操作是不可逆的`,
      okText: "确认",
      cancelText: "取消",
      onOk: async () => {
        const result = await passApplication({ id, isAdop });
        const { message: alertMessage }: any = result;
        message.success(alertMessage);
        setFilterParams({
          ...filterParams,
          page: 1,
        });
      },
    });
  };
  return (
    <div>
      <div className={styles.regHeader}>
        <Buttons
          buttonConfig={buttonList}
          onChange={(buttonChangeProp: ButtonChangePorps) =>
            onButtonChange(buttonChangeProp)
          }
        />
        <Radios list={radioList} onChange={(value) => radioChange(value)} />
        <Input
          placeholder="请输入活动名称"
          className={styles.activeInput}
          onChange={inputSearch}
        />
      </div>
      {contextHolder}
      <Table
        rowSelection={rowSelection}
        columns={columns}
        rowKey={(record) => record.id}
        dataSource={dataSource}
        style={{ marginTop: "20px" }}
        pagination={{
          total,
          pageSize: filterParams.pageSize,
          current: filterParams.page,
          onChange: (page) => {
            setFilterParams({
              ...filterParams,
              page,
            });
          },
        }}
      />
    </div>
  );
};
export default memo(Index);
